<template>
    <div>
        <SiceTitle :content="siceTitleContent"/>
        <el-row class="list" type="flex">
            <el-col 
                :class="i>14?'quarter':'item'" 
                v-for="(item,i) in list" 
                :key="item.img"
                @click.native="showImg(item.img)">
                <img :src="item.img" :alt="item.str">
                <p>{{item.str}}</p>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import SiceTitle from './components/siceTitle';
export default {
    components:{SiceTitle},
    data(){return{
        siceTitleContent:{
            sice:"HONOR",
            title:"资质荣誉",
            titleEn:"QUALIFICATION HONOR"
        }
    }},
    computed:{
        list(){
            const imgs = [
                require('@/assets/img/introduce/honor/11@2x.png'),
                require('@/assets/img/introduce/honor/22@2x.png'),
                require('@/assets/img/introduce/honor/33@2x.png'),
                require('@/assets/img/introduce/honor/44@2x.png'),
                require('@/assets/img/introduce/honor/55@2x.png'),
                require('@/assets/img/introduce/honor/66@2x.png'),
                require('@/assets/img/introduce/honor/77@2x.png'),
                require('@/assets/img/introduce/honor/88@2x.png'),
                require('@/assets/img/introduce/honor/99@2x.png'),
                require('@/assets/img/introduce/honor/110@2x.png'),
                require('@/assets/img/introduce/honor/111@2x.png'),
                require('@/assets/img/introduce/honor/222@2x.png'),
                require('@/assets/img/introduce/honor/333@2x.png'),
                require('@/assets/img/introduce/honor/444@2x.png'),
                require('@/assets/img/introduce/honor/555@2x.png'),
                require('@/assets/img/introduce/honor/666@2x.png'),
                require('@/assets/img/introduce/honor/777@2x.png'),
                require('@/assets/img/introduce/honor/888@2x.png'),
                require('@/assets/img/introduce/honor/999@2x.png'),
                require('@/assets/img/introduce/honor/1111@2x.png'),
                require('@/assets/img/introduce/honor/2222@2x.png'),
                require('@/assets/img/introduce/honor/3333@2x.png'),
                require('@/assets/img/introduce/honor/4444@2x.png'),
            ];
            const _list = this.$t("introduce.honor.list");
            const _resultList = [];
            _list.map((item,i)=> {
                _resultList.push({
                    str:item,
                    img:imgs[i]
                })
            })
            return _resultList;
        }
    },
    methods:{
        showImg(x){
            const origin = window.location.origin;
            window.open(`${origin}/${x}`)
        }
    }
}
</script>

<style lang="less" scoped>
.list {
    flex-wrap: wrap;
    p {
        font-size:14px;
        font-weight:400;
        color:rgba(102,102,102,1);
        line-height:21px;
    }
    .item {
        flex: 0 0 206px;
        margin-right: 60px;
        margin-bottom: 74px;
        &:nth-of-type(5n) {
            margin-right: 0;
        }
        img {
            width: 206px;
            height: 286px;
            margin-bottom: 13px;
        }
    }
    .quarter {
        flex:0 0 262px;
        margin-right: 70px;
        margin-bottom: 74px;
        &:nth-of-type(4n-1) {
            margin-right: 0;
        }
        img {
            width: 226px;
            height: 180px;
            margin-bottom: 13px;
        }
    }
}
</style>